|
1
|
|
|
import { assoc, dissoc, pipe } from 'ramda'; |
|
2
|
|
|
import React from 'react'; |
|
3
|
|
|
import { v4 as uuid } from 'uuid'; |
|
4
|
|
|
import PropTypes from 'prop-types'; |
|
5
|
|
|
import './CreateServer.scss'; |
|
6
|
|
|
|
|
7
|
1 |
|
const SHOW_IMPORT_MSG_TIME = 4000; |
|
8
|
|
|
|
|
9
|
4 |
|
const CreateServer = (ImportServersBtn, stateFlagTimeout) => class CreateServer extends React.Component { |
|
10
|
|
|
static propTypes = { |
|
11
|
|
|
createServer: PropTypes.func, |
|
12
|
|
|
history: PropTypes.shape({ |
|
13
|
|
|
push: PropTypes.func, |
|
14
|
|
|
}), |
|
15
|
|
|
resetSelectedServer: PropTypes.func, |
|
16
|
|
|
}; |
|
17
|
|
|
|
|
18
|
|
|
state = { |
|
19
|
|
|
name: '', |
|
20
|
|
|
url: '', |
|
21
|
|
|
apiKey: '', |
|
22
|
|
|
serversImported: false, |
|
23
|
|
|
}; |
|
24
|
|
|
|
|
25
|
|
|
handleSubmit = (e) => { |
|
26
|
1 |
|
e.preventDefault(); |
|
27
|
|
|
|
|
28
|
1 |
|
const { createServer, history: { push } } = this.props; |
|
29
|
1 |
|
const server = pipe( |
|
30
|
|
|
assoc('id', uuid()), |
|
31
|
|
|
dissoc('serversImported') |
|
32
|
|
|
)(this.state); |
|
33
|
|
|
|
|
34
|
1 |
|
createServer(server); |
|
35
|
1 |
|
push(`/server/${server.id}/list-short-urls/1`); |
|
36
|
|
|
}; |
|
37
|
|
|
|
|
38
|
|
|
componentDidMount() { |
|
39
|
4 |
|
this.props.resetSelectedServer(); |
|
40
|
|
|
} |
|
41
|
|
|
|
|
42
|
|
|
render() { |
|
43
|
8 |
|
const renderInputGroup = (id, placeholder, type = 'text') => ( |
|
44
|
24 |
|
<div className="form-group row"> |
|
45
|
|
|
<label htmlFor={id} className="col-lg-1 col-md-2 col-form-label create-server__label"> |
|
46
|
|
|
{placeholder}: |
|
47
|
|
|
</label> |
|
48
|
|
|
<div className="col-lg-11 col-md-10"> |
|
49
|
|
|
<input |
|
50
|
|
|
type={type} |
|
51
|
|
|
className="form-control" |
|
52
|
|
|
id={id} |
|
53
|
|
|
placeholder={placeholder} |
|
54
|
|
|
value={this.state[id]} |
|
55
|
|
|
required |
|
56
|
3 |
|
onChange={(e) => this.setState({ [id]: e.target.value })} |
|
57
|
|
|
/> |
|
58
|
|
|
</div> |
|
59
|
|
|
</div> |
|
60
|
|
|
); |
|
61
|
|
|
|
|
62
|
8 |
|
return ( |
|
63
|
|
|
<div className="create-server"> |
|
64
|
|
|
<form onSubmit={this.handleSubmit}> |
|
65
|
|
|
{renderInputGroup('name', 'Name')} |
|
66
|
|
|
{renderInputGroup('url', 'URL', 'url')} |
|
67
|
|
|
{renderInputGroup('apiKey', 'API key')} |
|
68
|
|
|
|
|
69
|
|
|
<div className="text-right"> |
|
70
|
|
|
<ImportServersBtn |
|
71
|
|
|
onImport={() => stateFlagTimeout(this.setState.bind(this), 'serversImported', true, SHOW_IMPORT_MSG_TIME)} |
|
72
|
|
|
/> |
|
73
|
|
|
<button className="btn btn-outline-primary">Create server</button> |
|
74
|
|
|
</div> |
|
75
|
|
|
|
|
76
|
|
|
{this.state.serversImported && ( |
|
77
|
|
|
<div className="row create-server__import-success-msg"> |
|
78
|
|
|
<div className="col-md-10 offset-md-1"> |
|
79
|
|
|
<div className="p-2 mt-3 bg-main text-white text-center"> |
|
80
|
|
|
Servers properly imported. You can now select one from the list :) |
|
81
|
|
|
</div> |
|
82
|
|
|
</div> |
|
83
|
|
|
</div> |
|
84
|
|
|
)} |
|
85
|
|
|
</form> |
|
86
|
|
|
</div> |
|
87
|
|
|
); |
|
88
|
|
|
} |
|
89
|
|
|
}; |
|
90
|
|
|
|
|
91
|
|
|
export default CreateServer; |
|
92
|
|
|
|
shlinkio /
shlink-web-client
